<template>
  <div class="body">
    <!-- 智能识别 -->
    <div class="identify">
      <div class="identifyinputwidth">
        <el-form label-width="80px">
          <el-form-item label="智能识别">
            <el-input
              v-model="address"
              placeholder="赵先生，1888888888，北京市东城区东直门街道十字坡西里小区6号楼6单元601室
赵先生，1888888888
"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-button type="primary">识别</el-button>
    </div>
    <!-- 用户电话号码栏 -->
    <div class="phone">
      <div class="custominput">
        <el-form label-width="80px">
          <el-form-item label="客户">
            <el-input v-model="address" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="phoneinput">
        <el-form label-width="80px">
          <el-form-item label="电话">
            <el-col :span="11">
             <el-input v-model="beforephone" placeholder="请输入"></el-input>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
             <el-input v-model="afterphone" placeholder="请输入"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <i >（分机号选填）</i>
    </div>

  </div>
</template>

<script>
export default {
  name: "CustomMsg",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      address: "",
      beforephone:'',
      afterphone:'',
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - 创建之前
  beforeCreate() {},
  //生命周期 - 挂载之前
  beforeMount() {},
  //生命周期 - 更新之前
  beforeUpdate() {},
  //生命周期 - 更新之后
  updated() {},
  //生命周期 - 销毁之前
  beforeDestroy() {},
  //生命周期 - 销毁完成
  destroyed() {},
};
</script>
<style lang='css' scoped>
/*@import url(); 引入公共css类*/
.body {
    white-space: nowrap;
}
.el-form {
  line-height: 70px !important;
  overflow: hidden;
  white-space: nowrap;
}
.identify {
  width: 80%;
  padding-left: 9px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.identifyinputwidth {
  width: 94%;
}
.custominput {
  width: 350px;
  padding-left: 9px;
}
.phone {
    display: flex;
}
.line {
    text-align: center;
}
i {
    line-height: 40px;
}
</style>